<div class="content">
  <div class="title">
    <button mat-button color="primary" class="add-btn" (click)="onOpenAdd()">添加</button>
    <button mat-button color="primary" class="add-btn" (click)="goBack()" style="margin-left: 20px">返回</button>
  </div>
  <div class="grid">
    <div class="titleLine" style="text-align: center">
      <span>文章类型</span>
      <span>操作</span>
    </div>
    <div *ngFor="let category of categorys">
      <span class="category">{{category.newsName}}</span>
      <div class="operate parentOperate">
        <button mat-button  (click)="onOpenEdit(category)">编辑</button>
        <button mat-button (click)="onDelete(category.id)">删除</button>
      </div>

      <div *ngFor="let item of category.child">
        <span class="category smallCategory">----------{{item.newsName}}</span>
        <div class="operate">
          <button mat-button  (click)="onOpenEdit(item)">编辑</button>
          <button mat-button (click)="onDelete(item.id)">删除</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!--<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">-->
  <!--<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>-->
    <!--<button mat-icon-button disabled></button>-->
    <!--{{node.filename}} : {{node.type}}-->
  <!--</mat-tree-node>-->

  <!--<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>-->
    <!--<button mat-icon-button matTreeNodeToggle-->
            <!--[attr.aria-label]="'toggle ' + node.filename">-->
      <!--<mat-icon class="mat-icon-rtl-mirror">-->
        <!--{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}-->
      <!--</mat-icon>-->
    <!--</button>-->
    <!--{{node.filename}} : {{node.type}}-->
  <!--</mat-tree-node>-->
<!--</mat-tree>-->